import {Content} from "antd/es/layout/layout";
import {useEffect, useState} from "react";
import WeatherApi from '@/api/weather'
import {WeatherCapitalForecast, WeatherHours} from "@/types/weather.ts";
import "./index.css";
import {Page, RealData} from "@/types/common";
import ChinaMap from "@/components/ChinaMap";
import WeatherTable from "@/components/WeatherList";

export default function MainContent() {
    const [forecasts, setForecasts] = useState<Page<WeatherCapitalForecast>>({
        page: 0,
        size: 0,
        pages: 0,
        total: 0,
        records: []
    })

    const [hoursWeather, setHoursWeather] = useState<RealData<WeatherHours[]>>({
        data: [],
        updateTime: ''
    });

    useEffect(() => {
        try {
            WeatherApi.fetchCapitalCitiesForecastsByPage().then(resp => {
                const result = resp.data;
                if (result.code === 200) {
                    setForecasts(result.data);
                }

            })
        } catch (error) {
            console.error('Error fetching forecasts:', error);
        }
    }, []);

    useEffect(() => {
        try {
            WeatherApi.fetchCapitalCitiesHoursWeather().then(resp => {
                const result = resp.data
                if (result.code === 200) {
                    setHoursWeather(result.data);
                }
            })
        } catch (error) {
            console.error('Error fetching hourly weather:', error);
        }
    }, []);

    // 定时获取数据
    useEffect(() => {
        const fetchDataAtScheduledTimes = () => {
            WeatherApi.fetchCapitalCitiesHoursWeather().then(resp => {
                const result = resp.data
                if (result.code === 200) {
                    setHoursWeather(result.data);
                }
            })
        };

        const intervalId = setInterval(fetchDataAtScheduledTimes, 30 * 60 * 1000); // 每30分钟检查一次

        return () => clearInterval(intervalId); // 清理定时器
    }, []);


    // 加载更多数据的函数
    const loadMoreData = () => {
        if (!forecasts || forecasts.page === forecasts.pages) return;
        try {
            WeatherApi.fetchCapitalCitiesForecastsByPage(forecasts.page + 1).then(resp => {
                const result = resp.data;
                if (result.code === 200) {
                    const newForecasts = forecasts.records.concat(result.data.records);
                    setForecasts({
                        ...result.data,
                        records: newForecasts
                    });
                }
            })
        } catch (error) {
            console.error('Error loading more data:', error);
        }
    }


    return (
        <Content className="main-content">
            <div className="weather-map">
                <ChinaMap data={hoursWeather}/>
            </div>
            <div className="weather-list-container">
                <div>
                    <h2 className="weather-list-title">全国各省市天气预报</h2>
                </div>
                <WeatherTable
                    forecastPage={forecasts}
                    loadMoreData={loadMoreData}
                />
            </div>
        </Content>
    )
}